<template>
  <div
    class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end bg-info"
    :class="className"
    :style="{ backgroundColor: bgColor, backgroundImage: `url('${bgImage}')` }"
  >
    <!--begin::Header-->
    <div class="card-header pt-5">
      <!--begin::Title-->
      <div class="card-title d-flex flex-column">
        <!--begin::Amount-->
        <span class="fs-2hx fw-bold lh-1 ls-n2 me-2 text-white">
          {{ reposWithCommitsLastMonth }}
        </span>
        <!--end::Amount-->

        <!--begin::Subtitle-->
        <span class="fw-semibold fs-6 pt-1 text-white opacity-50">过去1个月活跃仓库数</span>
        <!--end::Subtitle-->
      </div>
      <!--end::Title-->
    </div>
    <!--end::Header-->

    <!--begin::Card body-->
    <div class="card-body d-flex align-items-end pt-0">
      <!--begin::Progress-->
      <div class="d-flex align-items-center flex-column w-100 mt-3">
        <div
          class="d-flex justify-content-between fw-bold fs-6 w-100 mb-2 mt-auto text-white opacity-50"
        >
          <span>有提交的仓库总数: {{ reposWithCommits }}</span>
          <span>活跃率: {{ activePercentage }}%</span>
        </div>

        <div class="h-8px w-100 mx-3 rounded bg-white bg-opacity-50">
          <div
            class="h-8px rounded bg-white"
            role="progressbar"
            :style="`width: ${activePercentage}%`"
            :aria-valuenow="activePercentage"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
        </div>
      </div>
      <!--end::Progress-->
    </div>
    <!--end::Card body-->
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'CommitRepoWidget',
  props: {
    className: { type: String, default: '' },
    bgColor: { type: String, default: '#1E1E2D' },
    bgImage: { type: String, default: '' },
    reposWithCommits: { type: Number, default: 0 },
    reposWithCommitsLastMonth: { type: Number, default: 0 },
  },
  setup(props) {
    const activePercentage = computed(() => {
      return props.reposWithCommits
        ? Math.round((props.reposWithCommitsLastMonth / props.reposWithCommits) * 100)
        : 0;
    });

    return { activePercentage };
  },
});
</script>
